<template>
	<view class="zh-address">
		<view class="pt-200" v-if="addressData.total === 0">
			<empty-data :imgSrc="IMG_URL + '/status/no_list.png'"></empty-data>
		</view>
		<view class="list" v-if="addressData.total > 0">
			<view class="section" v-for="item in addressData.list" :key="item.id" @click="select(item)">
				<view class="top display-flex justify-between align-center">
					<view class="left">
						<text class="name">{{ item.contactname }}</text>
						<text class="tel">{{ item.contactphone }}</text>
						<text class="tag" v-if="item.isdefault == AddressIsdefault.yes">默认</text>
					</view>
					<view class="right display-flex justify-between">
						<image src="@/static/icons/edit_icon.png" class="edit" @click.stop="navigateTo('/pages/userCenter/address/add?info=' + util.setObjParams(item))"/>
						<image src="@/static/icons/delete_icon.png" class="delete" @click.stop="delAddress(item.id)"/>
					</view>
				</view>
				<view class="bottom">
					<view class="address">{{ item.province + item.city + item.area + item.address}}</view>
				</view>
			</view>
			<view class="load-more">
				<u-load-more ref="loadMoreRef"></u-load-more>
			</view>
		</view>
		<view class="bottom-fixed">
			<button class="app-primary-button" hover-class="app-primary-button-active" @click="navigateTo('/pages/userCenter/address/add')">新增地址</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { address, order } from '@/api'
	import { useAuthStore } from '@/store/auth'
	import { tip, util } from '@/utils'
	import type { AddressData } from '@/@type/address'
	import { AddressStatus, AddressIsdefault } from '@/enum/address'
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import emptyData from '@/pages/components/empty-data'
	import { IMG_URL } from '@/utils/constant'
	
	const loadMoreRef = ref()
	const type = ref('')
	const authStore = useAuthStore()
	const user = authStore.getUser()
	const addressData: any = reactive({
		query:{
			status: AddressStatus.enable,
			shopid: user.shopId,
			shopName:user.shopName,
			noLoading:false
		},
		params:{
			pageNum:1,
			pageSize:10,
			reasonable:false,
		},
		delParams: {
			id:"",
			status: AddressStatus.disable
		},
		list:[],
		total:''
	})
	
	onLoad((options:any) => {
		type.value = options.type?options.type:''
		addressList()
	})
	
	uni.$on('addressAdd', () => {
		refresh()
	})
	
	const addressList = (cb?:Function) => {
		address.getAddressList(addressData.query, addressData.params).then((res:any) => {
			cb && cb()
			addressData.list = [...addressData.list,...res.rows],
			addressData.total = res.total
		})
	}
	
	const delAddress = (id: string) => {
		tip.confirm('是否删除该地址').then(() => {
			addressData.delParams.id = id
			address.setAddressDel(addressData.delParams).then((res: any) => {
				tip.showToast('删除成功！')
				refresh()
			})
		})
	}
	
	
	const select = (item: any) => {
		if(!type.value ) return 
		const obj: any = {
			contactname:item.contactname,
			contactphone: item.contactphone,
			address:item.address,
			area: item.area,
			city: item.city,
			province:item.province,
			type:'address'
		}
		uni.$emit(type.value, obj)
		uni.navigateBack({
			delta: 1
		})
	}
	
	onReachBottom(() => {
		if(addressData.params.pageNum * addressData.params.pageSize > addressData.total) return loadMoreRef.value.changeStatusNoMore()
		addressData.params.pageNum++
		loadMoreRef.value.changeStatusLoading()
		setTimeout(() => {
			addressData.query.noLoading = true
			addressList(() => {
				loadMoreRef.value.changeStatusNoLoading()
				if(addressData.params.pageNum * addressData.params.pageSize > addressData.total) return loadMoreRef.value.changeStatusNoMore()
			})
		}, 300)
	})
	
	onPullDownRefresh(() => {
		refresh()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	
	const refresh = () => {
		addressData.query.noLoading = false
		if(loadMoreRef.value) loadMoreRef.value.changeStatusNoLoading()
		addressData.params.pageNum = 1
		addressData.list = []
		addressList()
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
	
</script>

<style lang="scss" scoped>
	.zh-address {
		.list {
			padding:20rpx 0 130rpx;
			.section {
				padding:40rpx 30rpx;
				background-color: $uni-bg-card-color;
				.top {
					.left {
						.name {
							font-size: 30rpx;
							color:#302D2D;
							font-weight: bold;
							font-size: $uni-font-size-34;
						}
						.tel {
							font-size: $uni-font-size-26;
							margin-left: 22rpx;
						}
						.tag {
							display:inline-block;
							width:57rpx;
							height: 30rpx;
							line-height: 30rpx;
							border-radius: 6rpx;
							border:1rpx solid $uni-color-primary;
							font-size: 20rpx;
							text-align:center;
							margin-left: 7rpx;
							color:$uni-color-primary;
						}
					}
					.right {
						.edit {
							width: 31rpx;
							height: 29rpx;
						}
						.delete {
							width: 25rpx;
							height:28rpx;
							margin-left: 33rpx;
						}
					}
				} 
				.bottom {
					margin-top:25rpx;
					.address {
						font-size: $uni-font-size-sm;
						color:$uni-text-color-light-black;
					}
				}
			}
		}
	}
</style>

